@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
@function f($fz) {
    @return $fz / 14 * 1em
}

html,body{
    width:100%;
    height:100%;
    overflow: hidden;
}
.web{ 
    position: relative;
    width:100%;
    height:100%;
    overflow: hidden;
    >header{
        height:r(197);
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        >label{
            margin-left:r(48);
            // margin-bottom:50px;
            >span{
                width:33px;
                height:3px;
                display:block;
                background:#000;
                margin-top:7px;
               
            }
        }
        >.logo{
            width:150px;
            transition: width .5s ease-in-out;
            >img{
                width:100%;
            }
        }
        >label{
            display: inline-block;
            margin-right:r(48);
            // margin-bottom:35px;
        }
    }//header
    >.content{
        width:100%;
        margin: 0 auto;    
        padding-right: 30px;
        position: absolute;
        left:0;
        bottom:0;
        top:r(197);
        right: -30px;
        overflow-x: hidden;
	    overflow-y: scroll;
        >.kjxq_box{
            width:r(1477);
            margin: 0 auto;
            margin-bottom:115px;  
            >.img_banner{
                width:100%;
                >img{
                    width:100%;
                }
            }
            >.top_box{
                margin-top:r(105);
                display:flex;
                display:-webkit-flex;
                justify-content: space-between;
                align-items: center;
                >.left{
                    width:r(463);
                    margin-left:r(36);
                    >h1{
                        font-size:r(45);
                    }
                    >p{
                        font-size:r(25);
                    }
                    >.middle_p{
                        margin-top:r(54);
                        margin-bottom:r(186);
                    }
                }
                >.right{
                    width:r(890);
                    >img{
                        width:100%;
                    }
                }
            }
            >.middle_box{
                display:flex;
                display:-webkit-flex;
                justify-content: space-between;
                margin-top:r(103);
                >.left{
                    width:r(848);
                    >img{
                        width:100%;
                    }
                }
                >.right{
                    width:r(520);
                    >img{
                        width:100%;
                    }
                }
            }
            >.middle_box2{
                display:flex;
                display:-webkit-flex;
                justify-content: space-between;
                margin-top:r(103);
                >p{
                    align-self: flex-end;
                    width:r(457);
                    font-size:r(25);
                }
                >div{
                    width:r(889);
                    >img{
                        width:100%;
                    }
                }
            }
            >.Scene{
                margin-top:r(152);
                text-align: center;
                margin-bottom:r(80);
            }
            >.simg_box{
                margin-bottom:r(50);
                position: relative;
                display: flex;
                display:-webkit-flex;
                justify-content: space-between;
                >div{
                    width:r(457);
                    >img{
                        width:100%;
                    }
                }
                >span{
                    display: inline-block;
                    font-size:30px;
                    padding:r(30) r(15);
                    color:gray;
                    background: rgba($color: #fff, $alpha: .5)
                }
                >.left{
                    position: absolute;
                    left: 0;
                    top:50%;
                    transform: translate(-100%,-50%);
                    // transform: translateX(-100%);
                    // transform: translateY(-50%);
                    
                }
                >.right{
                    position: absolute;
                    right: 0;
                    top:50%;
                    transform: translate(100%,-50%);
                    // transform: translateX(-100%);
                    // transform: translateY(-50%);
                }
            }
            >.yuan{
                margin:0 auto;
                width: r(1477);
                text-align: center;
               
                >span{
                    display:inline-block;
                    width:12px;
                    height:12px;
                    background:#000;
                    border-radius: 50%;
                    margin-left:r(12);
                }
                >span:nth-of-type(2){
                    background:#9c9c9c;
                }
            }
        }//kjxq_box
     
  
        >.bg_img{
            position: relative;
            width:r(1920);
            >img{
                width:100%;
            }
            >footer{
                width:100%;
                display:flex;
                display:-webkit-flex;
                justify-content: space-around;
                align-items: center;
                background:rgba($color: #000000, $alpha: .5);
                position: absolute;
                bottom:0;
                padding-top:r(45);
                padding-bottom:r(45);
                >p{
                    font-size:11px;
                    color:#fff;
                }
                >div{
                    display: flex;
                    display:-webkit-flex;
                    >input{
                        display: none;
                    }
                    #jiantou_a:checked ~label{
                        transform: rotateZ(-90deg);
                    }
                   
                        >ul{
                            display: flex;
                            display:-webkit-flex;
                            display: none;
                            >li{
                                width:r(40);
                                >img{
                                    width:100%;
                                }
                            }
                            
                        }
                    >label{
                        >span{
                            display: block;
                            width:r(35);
                            >img{
                                width:100%;
                            }
                        }
                    }
                }
            }
        }//bg_img
    }//content
    .content::-webkit-scrollbar {display:none}
}//web

@media only screen and (min-width: 768px) {
    .web{ 
        >.content{
            >.kjxq_box{
                >.top_box{
                    >.right{
                        width:r(890);
                        height: r(560);
                        overflow: hidden;
                        >img{
                            width:100%;
                            transition: transform .5s ease-in-out;
                        }
                        >img:hover{
                            transform: scale(1.1);
                        }
                    }
                }
                >.middle_box{
                    >.left{
                        width:r(848);
                        height: r(646);
                        overflow: hidden;
                        >img{
                            width:100%;
                            transition: transform .5s ease-in-out;
                        }
                        >img:hover{
                            transform: scale(1.1);
                        }
                    }
                    >.right{
                        width:r(520);
                        height: r(646);
                        overflow: hidden;
                        >img{
                            width:100%;
                            transition: transform .5s ease-in-out;
                        }
                        >img:hover{
                            transform: scale(1.1);
                        }
                    }
                }
                >.middle_box2{
                    >div{
                        width:r(889);
                        height: r(560);
                        overflow: hidden;
                        >img{
                            width:100%;
                            transition: transform .5s ease-in-out;
                        }
                        >img:hover{
                            transform: scale(1.1);
                        }
                    }
                }
                >.Scene{
                }
                >.simg_box{
                    >div{
                        width:r(457);
                        height:r(314);
                        overflow: hidden;
                        >img{
                            width:100%;
                            transition: transform .5s ease-in-out;
                        }
                        >img:hover{
                            transform: scale(1.1);
                        }
                    }
                }
            }//kjxq_box
        }//content
    }//web
}
@media only screen and (max-width: 768px) {
    .web{ 
        position: relative;
        width:100%;
        height:100%;
        >header{
            height:50px;
            >.left{
                width:r(100);
                margin-left:r(48);
                >span{
                    width:100%;
                    height:3px;
                    display:block;
                    background:#000;
                    margin-top:5px;         
                }
            }
            >.logo{
                width:r(150);
                >img{
                    width:100%;
                }
            }
            >.right{  
                width:r(100);  
                margin-right:r(48);
                // margin-bottom:35px;
                >img{
                    width:100%;
                }
            }
        }//header
        >.content{
            width:100%;
            margin: 0 auto;      
            position: absolute;
            left:0;
            right: 0;
            bottom:0;
            top:r(197);
            overflow: auto;
            padding-right:0;

            >.kjxq_box{
                width:100%;
                margin: 0 auto;
                margin-bottom:30px;  
                >.img_banner{
                    width:100%;
                    >img{
                        width:100%;
                    }
                }
                >.top_box{
                    margin-top:r(105);
                    display:flex;
                    display:-webkit-flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    >.left{
                        width:100%;
                        margin-left:r(36);
                        >h1{
                            font-size:r(65);
                        }
                        >p{
                            font-size:r(55);
                            margin-bottom:10px;
                        }
                        >.middle_p{
                            margin-top:r(55);
                            margin-bottom:r(186);
                        }
                    }
                    >.right{
                        width:100%;
                        >img{
                            width:100%;
                        }
                    }
                }
                >.middle_box{
                    display:flex;
                    display:-webkit-flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    margin-top:r(103);
                    >.left{
                        margin-bottom:20px;
                        width:100%;
                        >img{
                            width:100%;
                        }
                    }
                    >.right{
                        width:100%;
                        >img{
                            width:100%;
                        }
                    }
                }
                >.middle_box2{
                    display:flex;
                    display:-webkit-flex;
                    justify-content: space-between;
                    margin-top:r(103);
                    flex-wrap: wrap;
                    >p{
                        align-self: flex-end;
                        width:100%;
                        font-size:r(55);
                        margin-bottom:20px;
                    }
                    >div{
                        width:100%;
                        >img{
                            width:100%;
                        }
                    }
                }
                >.Scene{
                    margin-top:r(152);
                    text-align: center;
                    margin-bottom:r(80);
                }
                >.simg_box{
                    margin-bottom:r(50);
                    position: relative;
                    display: flex;
                    display:-webkit-flex;
                    justify-content: space-between;
                    >div{
                        width:r(457);
                        >img{
                            width:100%;
                        }
                    }
                    >span{
                        display: inline-block;
                        font-size:30px;
                        padding:r(30) r(15);
                        color:gray;
                        background: rgba($color: #fff, $alpha: .5)
                    }
                    >.left{
                        position: absolute;
                        left: 0;
                        top:50%;
                        transform: translate(-100%,-50%);
                        // transform: translateX(-100%);
                        // transform: translateY(-50%);
                        
                    }
                    >.right{
                        position: absolute;
                        right: 0;
                        top:50%;
                        transform: translate(100%,-50%);
                        // transform: translateX(-100%);
                        // transform: translateY(-50%);
                    }
                }
                >.yuan{
                    margin:0 auto;
                    width: 100%;
                    text-align: center;
                   
                    >span{
                        display:inline-block;
                        width:12px;
                        height:12px;
                        background:#000;
                        border-radius: 50%;
                        margin-left:r(12);
                    }
                    >span:nth-of-type(2){
                        background:#9c9c9c;
                    }
                }
            }//kjxq_box
         
      
            >.bg_img{
                position: relative;
                width:100%;
                >img{
                    width:100%;
                }
                >footer{
                    width:100%;
                    padding-top:20px;
                    padding-bottom:20px;
                    >p{
       
                    }
                    >div{
                   
                        >input{
                            display: none;
                        }
                        #jiantou_a:checked ~label{
                            transform: rotateZ(-90deg);
                        }
                       
                            >ul{
                                display: flex;
                                display:-webkit-flex;
                                display: none;
                                >li{
                                    width:r(60);
                                    >img{
                                        width:100%;
                                    }
                                }
                                
                            }
                        >label{
                            >span{
                                display: block;
                                width:r(35);
                                >img{
                                    width:100%;
                                }
                            }
                        }
                    }
                }//footer
            }//
        }//content
        .content::-webkit-scrollbar {display:none}
    }//web
}